<template>
	<div class="order">
		<div class="order_title">
			订单详情
		</div>
		<div class="order_body" v-model="order_list">
			<p><span class="lab">订单编号:</span><span>{{order_list.orderId}}</span></p>
			<p><span class="lab">订单详情:</span><span>{{order_list.orderSubject}}</span></p>
			<p><span class="lab">预约时间:</span><span>{{order_list.orderTime}}</span></p>
			<p v-if="order_list.serverType == 1"><span class="lab">服务类型:</span><span>自驾车前往代理商</span></p>
			<p v-if="order_list.serverType == 0"><span class="lab">服务类型:</span><span>代理商上门取车</span></p>
			<p v-if="order_list.serverType == 0"><span class="lab">上门取车地址:</span><span>{{order_list.visitAddress}}</span></p>
			<p><span class="lab">订单价格:</span><span>￥{{order_list.orderMoney}}</span>
			<mu-button flat color="primary" @click="show3 = !show3">详情</mu-button>
			<mu-flex class="mu-transition-row row">
			<mu-expand-transition>
			<div v-show="show3">
				<div class="mu-transition-box box" v-if="baseMoney">基础服务费用:￥{{baseMoney}}</div>
				<div class="mu-transition-box box" v-if="visitMoney">上门取车服务费用:￥{{visitMoney}}</div>
				<div class="mu-transition-box box" v-if="operateMoney">营运车服务费用:￥{{operateMoney}}</div>
				<div class="mu-transition-box box" v-if="lessMoney">使用年限十年以下费用:￥{{lessMoney}}</div>
				<div class="mu-transition-box box" v-if="moreMoney">使用年限十年以上费用:￥{{moreMoney}}</div>
			</div>
			</mu-expand-transition>
			</mu-flex>
			</p>
		</div>
		<div class="pay_for">
			<div class="go_charge" @click="go_charge">
				<img src="/static/images/zhifubao.png" alt="">支付宝支付
			</div>
		</div>
		<div class="pay_for">
			<div class="go_charge" @click="go_wxcharge">
				<img src="/static/images/weixin.png" alt="">微信支付
			</div>
		</div>
		<mu-button color="success" class="return_order" @click="return_order">
		  返回订单<mu-icon right value="send"></mu-icon>
		</mu-button>
		<mu-dialog title="提示信息" width="360" :open.sync="openSimple">
			{{msg}}
			<mu-button slot="actions" flat color="primary" @click="closeSimpleDialog">关闭</mu-button>
		</mu-dialog>

		<mu-dialog title="请将如下网址复制到浏览器打开" width="360" :open.sync="openSimple2">
			{{alipay_url}}
			<input type="text" v-show="false" v-model="alipay_url" />
			<mu-button slot="actions" flat color="primary" @click="handleCopy(alipay_url,$event)">复制到剪切板</mu-button>
			<mu-button slot="actions" flat @click="closeSimpleDialog">关闭</mu-button>
		</mu-dialog>

		<div class="alert-demo-wrapper">
			<mu-alert color="warning" @delete="alert1 = false" delete v-if="alert1" transition="mu-scale-transition">
				<mu-icon left value="warning"></mu-icon>请先上传您的行驶证信息,才可继续操作
				<mu-button flat color="primary" @click="to_appForm">前往</mu-button>
			</mu-alert>
		</div>
		<foot-nav></foot-nav>
	</div>
</template>

<script>
	import clip from '@/utils/clipboard'
	import footNav from '../../components/common/foot'
	export default {
		name: "order",
		components: {
			footNav
		},
		data() {
			return {
				show3: false,
				alert1: false,
				canPay: false,
				alipay_url: '',
				openSimple: false,
				openSimple2: false,
				msg: '',
				baseMoney: '',
				visitMoney: '',
				operateMoney: '',
				lessMoney: '',
				moreMoney: '',
				order_list: {

				},
			}
		},
		methods: {
			return_order(){
				this.$router.push({name:'order_list'})
			},
			to_appForm() {
				this.$router.push({
					name: 'app_msg',
					query: {orderId: this.$route.query.orderId}
				})
			},
			go_charge() {
				if (!this.canPay) {
					this.$toast.error("请先完善您的行驶证信息");
					return
				}
				let ua = navigator.userAgent.toLowerCase() || window.navigator.userAgent.toLowerCase()
				let isWX = /MicroMessenger/i.test(ua)
				// 					this.openSimple2=true
				// 					this.alipay_url= "http://114.115.215:8080"+"/check-car/app/alipay/goAlipay/"+this.order_list.orderId

				if (isWX) {
					this.openSimple2 = true
					this.alipay_url = "http://jc.zonguo.cn:80" + "/check-car/app/alipay/goAlipay/" + this.order_list.orderId
				} else {
					window.open("http://jc.zonguo.cn:80" + "/check-car/app/alipay/goAlipay/" + this.order_list.orderId);
					this.$router.push({
						name: 'order_list'
					})
				}
				// 					window.open("http://114.115.215.44:8080"+"/check-car/app/alipay/goAlipay/"+this.order_list.orderId);
				// 					this.$router.push({name:'order_list'})
			},
			handleCopy(text, event) {
				clip(text, event)
				console.log('clicp')
			},
			go_wxcharge() {
				if (!this.canPay) {
					this.$toast.error("请先完善您的行驶证信息");
					return
				}
				
// 				let ua = navigator.userAgent.toLowerCase() || window.navigator.userAgent.toLowerCase()
// 				let isWX = /MicroMessenger/i.test(ua)
// 				if (!isWX){
// 					this.$toast.error("请在微信浏览器中打开")
// 					return
// 				}
				// window.open("http://jc.zonguo.cn/check-car/app/wxcode");
				// alert('敬请期待')
				this.$toast.info("开始前往微信支付......");
				this.$ajax.post("/check-car/app/check/wxcode/"+this.order_list.orderId)
				.then((res)=>{
					this.$toast.info("前往授权页面")
					window.location.href = res.data.url
				})
				// let xxx = window.open("http://jc.zonguo.cn:8080/check-car/app/wxcode");

			},
			closeSimpleDialog() {
				this.openSimple = false
				this.openSimple2 = false
			}
		},
		created() {
			
			let userInfo = JSON.parse(localStorage.getItem('USER'));
			let nowdate = new Date()
			if((nowdate.getTime() - userInfo.date)/1000 > userInfo.expire){
				localStorage.clear()
				this.$toast.error("请重新登陆");
			}
			
			
			this.$ajax.get("/check-car/app/check/getOrder?orderId=" + this.$route.query.orderId, {})
			.then((res) => {
				console.log(res)
				if (res.data.code == 200) {
					this.order_list = res.data.data.orderEntity;
					this.baseMoney = res.data.data.agentEntity.basePrice
					if(res.data.data.orderEntity.useCharacter == 1){
						// 基础服务
						this.operateMoney = res.data.data.agentEntity.operatePrice
					}
					if(res.data.data.orderEntity.serverType == 0){
						// 上门取车服务
						this.visitMoney = res.data.data.agentEntity.visitPrice
					}
					if(res.data.data.orderEntity.useYears == 0){
						// 十年以下
						this.lessMoney = res.data.data.agentEntity.lessPrice
					}else if(res.data.data.orderEntity.useYears == 1){
						// 十年以上
						this.moreMoney = res.data.data.agentEntity.morePrice
					}
					if (res.data.data.userCarEntity &&
						res.data.data.userCarEntity.vin && res.data.data.userCarEntity.plateNum) {
							// 上传了行驶证才可以用支付
						this.canPay = true
					} else {
						this.alert1 = true
					}
				} else if (res.data.code == 401) {
					this.$toast.info("登陆失效，请重新登陆");
				} else {
					this.msg = res.data.msg
					this.openSimple = false
				}
			});
			
			if(this.$route.query.orderMoney){
				this.$toast.warning("订单价格已变更");
			}
		}
	}
</script>

<style scoped>
	.order_title {
		line-height: 60px;
		text-align: center;
		background-color: #dddddd;
	}

	.order_body p {
		padding: 0 15px;
	}

	.lab {
		display: inline-block;
		width: 90px;
		margin-right: 15px;
		text-align: right;
	}

	.pay_for {
		width: 50%;
		float: left;
		padding: 10px 10px;
	}
	.return_order {
		margin-right: 10px;
		float: right;
	}

	.go_charge {
		margin: 0 auto;
		width: 100%;
		height: 60px;
		text-align: center;
		line-height: 60px;
		font-size: 16px;
		background-color: #00bcd4;
		color: #fafafa;
	}

	.go_charge img {
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 5px;
	}
	.row{
		text-align: center;
		float: left;
		margin-left: 100px;
	}
	.box{
		text-align: left;
	}
</style>
